<template>
  <div class="bookshelf">
    <div id="statusBar"></div>
    <van-nav-bar title="让阅读成为习惯">
      <template #right>
        <van-icon name="plus" size="18" @click="goToBookCity" />
      </template>
    </van-nav-bar>
    <div class="box" v-if="bookShelfData">
      <div class="book-list" v-if="bookShelfData.length > 0">
        <div v-for="(item, index) in bookShelfData" :key="index" @click="goToRead(item.link, item.bookId)">
          <img class="img" :src="item.cover" alt="">
          <van-swipe-cell>
            <div class="title one-text">{{item.title}}</div>
            <div class="read">已读{{item.progress}}%</div>
            <template #right>
              <van-button square type="danger" text="删除" @click="delBookShelfData(item.bookId)" />
            </template>
          </van-swipe-cell>
        </div>
      </div>
      <van-empty description="书架竟然没有书?" v-else />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Bookshelf',

  data() {
    return {
      bookShelfData: []
    }
  },

  created() {
    this.getBookShelfData();
  },

  methods: {
    // 获取收藏记录
    getBookShelfData() {
      // 获取本地存储的数据
      let oldBookShelf = localStorage.getItem('bookShelf');
      // 转换成json格式
      oldBookShelf = JSON.parse(oldBookShelf);
      if(oldBookShelf == null) {
        return;
      }
      oldBookShelf.forEach(v => {
        v.progress = Math.round((v.index / v.maxIndex * 100));
      })
      this.bookShelfData = oldBookShelf;
    },

    // 删除书籍
    delBookShelfData(bookId) {
      this.$dialog.confirm({
        title: '提示',
        message: '是否删除该书籍？',
      })
        .then(() => {
          // on confirm
          // 获取本地存储的数据
          let oldBookShelf = localStorage.getItem('bookShelf');
          // 转换成json格式
          oldBookShelf = JSON.parse(oldBookShelf);
          if(oldBookShelf == null) {
            return;
          }
          // 遍历
          oldBookShelf.forEach((item, index) => {
            // 判断是否已经存在
            if(item.bookId === bookId) {
              // 存在则移除数据
              oldBookShelf.splice(index, 1);
            }
          })
          // 转换成字符串
          oldBookShelf = JSON.stringify(oldBookShelf);
          // 存储到本地存储
          localStorage.setItem('bookShelf', oldBookShelf);
          this.getBookShelfData();
        })
        .catch(() => {
          // on cancel
        });
        return
      
    },

    // 跳转到书城
    goToBookCity() {
      this.$router.replace({name: 'BookCity'});
    },

    // 转到阅读页
    goToRead(link, bookId) {
      this.$router.push({name: 'Read', query: {link, bookId}});
    },
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar .van-icon {
  color: #00bb86;
}
::v-deep .van-nav-bar__title {
  color: #00bb86;
  font-size: 16px;
}
::v-deep .van-empty {
  padding: 166px 0;
}
::v-deep .van-button {
  width: 94px;
  height: 34px;
  border: 0;
}
.box {
  position: fixed;
  top: 46px + 28px;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 0 5px 20px 5px;
  overflow-y: auto;
}
.book-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  // height: 100%;
  &>div {
    margin-top: 20px;
    width: 33.33333%;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .img {
    margin: 0 auto;
    width: 100%;
    height: 122px;
    border-radius: 4px;
    box-shadow: 2px 2px 6px #aaa;
  }
  .title {
    margin: 8px 0 2px 0;
    max-width: 91px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
  }
  .read {
    font-size: 10px;
  }
}
</style>
